@model IList<EFCoreBookStore.Models.BookViewModel>

<div class="">
    <div class="page-title">
        <div class="title_left">
        <h3>Books</h3>
        </div>

        <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
                <div class="x_title">
                <h2>List of Books</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li><i class="fa fa-plus"></i> Add Data</li>
                </ul>
                <div class="clearfix"></div>
                </div>

                <div class="x_content">
                    <div class="table-responsive">
                        <table class="table table-striped jambo_table bulk_action">
                        <thead>
                            <tr class="headings">
                                <th>
                                    <input type="checkbox" id="check-all" class="flat">
                                </th>
                                <th class="column-title" style="width: 10%">Cover</th>
                                <th class="column-title" style="width: 10%">Category</th>
                                <th class="column-title" style="width: 40%">Title</th>
                                <th class="column-title" style="width: 20%">Publish Date</th>
                                <th class="column-title" style="width: 10%">Qty</th>
                                <th class="column-title no-link last" style="width: 10%"><span class="nobr">Action</span></th>
                            </tr>
                        </thead>

                        <tbody>
                            @{ var odd = false; }
                            @foreach (var item in Model){
                            <tr class="@(odd ? "odd": "even") pointer">
                                <td class="a-center ">
                                    <input type="checkbox" class="flat" name="table_records">
                                </td>
                                <td class=" "><img src="~/upload/aspnet-mvc.jpg" width="100"/></td>
                                <td class=" ">@item.CategoryName</td>
                                <td class=" ">
                                    @item.Title<br/>
                                    ISBN: @item.ISBN<br/>
                                    Authors: @item.AuthorNames<br/>
                                    Price: @item.Price<br/>
                                </td>
                                <td class=" ">@item.PublishDate</td>
                                <td class=" ">@item.Quantity</td>
                                <td class=" last">
                                    <a asp-controller="Book" asp-action="Edit" asp-route-id="@item.ISBN">Edit</a> | 
                                    <a asp-controller="Book" asp-action="Delete" asp-route-id="@item.ISBN">Delete</a>
                                </td>
                            </tr>
                            odd = !odd;
                            }
                        </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>